<template>
  <div class="recharge-page">
    <el-card shadow="always">
      <div slot="header">
        <line-header title="发放优惠券"></line-header>
      </div>
      <div class="card-body">
        <div class="card-top-box">
          <div class="top-text-box">发放须知：</div>
          <div class="top-text-box">a. 优惠券金额包含10元、20元、30元、40元、50元、60元、70元、80元、90元、100元十种类型</div>
          <div>
            <span class="top-text-box">b. 优惠券发放直接到账，无需领取，</span>
            <span class="top-text-box" >每张优惠券有效时间为<span style="font-weight: bold;color: #134bde;">{{config.useExpire*0.001/3600}}</span>小时</span>
          </div>
          <div>
            <span class="top-text-box"
            >c. 如发放失败，请联系系统管理员帮助处理</span
            >
          </div>
        </div>
        <div class="card-bottom-box">
          <el-form
            ref="form"
            :model="form"
            label-width="110px"
          >

            <el-form-item label="用户名：" prop="amount" >
              <!--<el-input-->
                <!--v-model="form.account"-->
                <!--placeholder="请输入用户名"-->
              <!--&gt;</el-input>-->
              <el-select v-model="form.account" placeholder="请选择用户">
                <el-option v-for="(item , index) in userList" :label="item.account" :value="item.account"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="优惠券：" prop="count" >
              <el-select v-model="form.kind" placeholder="请选择优惠券类型">
                <el-option v-for="(item,index) in quanList" :key="item.title" :label="item.title"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="发放数据量：" prop="amount" >
              <el-input
                v-model="form.count"
                placeholder="请输入优惠券张数"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="bottom-btn-box">
          <el-button type="primary" :disabled="!validate()" @click="hkSubmit">发放</el-button>
        </div>


      </div>
    </el-card>
  </div>
</template>

<script>
  import LineHeader from "@/components/line-header/index";
  import {mapGetters} from "vuex"
  import {trace} from "../../../utils/trace"
  import QRcode from "qrcode"
  import {hkShowErrorText, hkShowSuccessText} from "../../../utils/tools"
  import {getUserNameList} from "../../../api/user";

  export default {
    components: {
      LineHeader
    },

    props: {},
    data() {
      return {
        userList: [],
        quanList: [],
        wxOrderUrl: "",
        dialogTableVisible: false,
        form: {
          account: "",
          kind: "",
          count: "",
        },
        formRules: {
          account: [
            {
              required: true,
              message: "请输入发放用户名",
              trigger: ["blur", "change"]
            },
          ],
          kind: [
            {
              required: true,
              message: "请选择优惠券类型",
              trigger: ["blur", "change"]
            },
          ],
          count: [
            {
              required: true,
              message: "请输入发放数量",
              trigger: ["blur", "change"]
            },
          ]
        }
      };
    },
    watch: {},
    computed: {
      ...mapGetters([
        'balance',"config"
      ])
    },
    methods: {
      validate(){
        let {account, kind, count} = this.form;
        trace(account,kind,count)
        if(account.length>=3&&count>0&&kind!=""){
          return true;
        }
        return false;
      },
      hkSubmit() {
        this.$refs.form.validate(async valid => {
          let {account, kind, count} = this.form;
          let isAll = (account=="所有人");
          let res = await this.$store.dispatch('finance/coupon', {account, kind, count,isAll})
          if (res.code == 2000) {
            hkShowSuccessText("发放成功。");
          } else {
            hkShowErrorText("发放失败。")
          }
          trace("发放-data", res,this.form);
        });
      },
      resetForm() {
        this.$refs.form.resetFields();
      },
      async checkUserList() {
        this.userList = (await getUserNameList({page:1, count: 100})).data;
        this.userList.unshift({
          account:"所有人"
        })

      }
    },
    created() {
      this.quanList = [];
      for (var i = 0; i < 10; i++) {
        this.quanList.push({
          value: i + 1,
          title: (i + 1) * 10 + "元优惠券"
        })
      }
    },
    mounted() {
      this.checkUserList();
    }
  };
</script>
<style lang="scss" scoped>
  .card-body {
    max-width: 80%;
    margin: 0 auto;

    .card-top-box {
      border-radius: 10px;
      background-color: #d5d8da2a;
      padding: 20px;

      .top-text-box {
        line-height: 30px;
      }

      .top-sign-text {
        color: #ff1f34;
      }
    }

    .card-bottom-box {
      width: 50%;
      margin: 50px auto;

      .balance-box {
        font-size: 30px;
        font-weight: 500;
      }

      .el-radio,
      .el-radio-group {
        display: flex;
        align-items: center;

        .radio-content-box {
          text-align: center;

          .radio-text-box {
            margin-top: 5px;
            font-size: 14px;
          }
        }
      }
    }

    .bottom-btn-box {
      text-align: center;
      margin: 50px;
    }
  }
</style>
